<template>
  <div class="success">
    <div class="top">
      <img src="../assets/images/success.png" alt="" /><span>提交成功</span>
    </div>
    <div class="middle">
      <div>请在7个工作日内联系导师，并于日内上传结项申请</div>
      <div>结项申请上传入口：登录活动主页右上角"查询中心"</div>
    </div>
    <div class="bottom">
      <span>{{ time + "秒后自动跳转" }}</span
      ><el-button type="primary" @click="$router.push('/login')"
        >点击立即前往</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: 5,
    };
  },
  watch: {
    time: {
      handler() {
        var timeId = window.setTimeout(() => {
          this.time--;
        }, 1000);
        if (this.time == 0) {
          window.clearTimeout(timeId);
          this.$router.push("/login");
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.success {
  height: 80%;
  text-align: center;
  margin-top: 120px;
  .top {
    margin-bottom: 40px;
    img {
      width: 60px;
      height: 60px;
      margin-right: 20px;
    }
    span {
      height: 32px;
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
      color: #000000;
      opacity: 0.9;
      vertical-align: middle;
    }
  }
  .middle {
    div {
      height: 19px;
      font-size: 14px;
      font-weight: 400;
      line-height: 19px;
      color: #000000;
      opacity: 0.9;
      margin-bottom: 20px;
    }
  }
  .bottom {
    margin-top: 60px;
    span {
      height: 19px;
      font-size: 14px;
      font-weight: 400;
      line-height: 19px;
      color: #000000;
      opacity: 0.9;
    }
    ::v-deep .el-button--primary {
      width: 120px;
      height: 40px;
      background: #0a59f7;
      border-radius: 2px;
      margin-left: 7px;
    }
  }
}
</style>
